<template>
  <div>
    <h3 class="ArticleTitle">{{ EachArticleData.title }}</h3>
    <p>
      <span class="ArticleTitle_span1">{{
        parseTime(EachArticleData.createTime)
      }}</span>
      <span class="ArticleTitle_span1">{{ EachArticleData.username }}</span>
      <i class="el-icon-view"></i>
      <span class="ArticleTitle_span2">{{ EachArticleData.visits }}</span>
    </p>
    <div v-html="EachArticleData.articleBody" class="Content"></div>
  </div>
</template>

<script>
// 时间过滤
import { parseTime } from '@/utils/index.js'
export default {
  props: {
    EachArticleData: {
      typeof: Object
    }
  },
  data () {
    return {
      parseTime: parseTime
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.ArticleTitle {
  margin-top: -20px;
}
.ArticleTitle_span1 {
  margin-right: 10px;
}
.ArticleTitle_span2 {
  margin-left: 10px;
}
.el-icon-view {
  color: #1d82fe;
}
::v-deep.Content {
  border-top: 1px solid #e8e8e8;
  border-style: dashed;
  border-left: none;
  border-bottom: none;
  border-right: none;
  background-color: #f5f5f5;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  img {
    width: 100% !important;
  }
}
</style>
